import React, {
    useEffect,
    useState,
    forwardRef,
    useImperativeHandle,
    useCallback,
} from 'react';
import {
    View,
    Text,
    StyleSheet,
    Image,
    Modal,
    TouchableOpacity,

} from 'react-native';
import icon_group from "../../assets/icon_group.png"
import icon_create_group from "../../assets/icon_create_group.png"

export interface FloatMenuRef {
    show: (pageY: number) => void;
    hide: () => void;
}

export default forwardRef((props: any, ref) => {
    const [visible, setVisible] = useState<boolean>(false);
    const [y, setY] = useState<number>(100)
    const show = (pageY: number) => {
        setY(pageY)
        setVisible(true);
    };

    const hide = () => {
        setVisible(false);
    };

    useImperativeHandle(ref, () => {
        return {
            show,
            hide,
        };
    });
    const renderMenus = () => {

        return (
            <View style={[styles.content, { top: y }]}>
                <TouchableOpacity style={styles.contentItem}>
                    <Image style={styles.contentIcon} source={icon_group} />
                    <Text style={styles.contentTxt}>群聊广场</Text>
                </TouchableOpacity>
                <View style={styles.line}></View>
                <TouchableOpacity style={styles.contentItem}>
                    <Image style={styles.contentIcon} source={icon_create_group} />
                    <Text style={styles.contentTxt}>创建群聊</Text>
                </TouchableOpacity>
            </View>
        )
    }

    return (
        <Modal
            transparent={true}
            visible={visible}
            statusBarTranslucent={true}
            animationType="fade"
            onRequestClose={hide}>
            <TouchableOpacity onPress={hide} activeOpacity={1} style={styles.root}>
                {renderMenus()}
            </TouchableOpacity>
        </Modal>
    );
});

const styles = StyleSheet.create({
    root: {
        width: '100%',
        height: '100%',
        backgroundColor: '#00000060',
    },
    content: {
        width: 170,
        backgroundColor: 'white',
        borderRadius: 16,
        position: 'absolute',
        right: 10
    },
    contentItem: {
        height: 56,
        flexDirection: 'row',
        alignItems: 'center',
        paddingLeft: 20,
        width: '100%'
    },
    contentIcon: {
        width: 28,
        height: 28,
        resizeMode: 'contain',
    },
    contentTxt: {
        fontSize: 18,
        color: '#333',
        marginLeft: 10
    },
    line: {
        height: 1,
        backgroundColor: '#eee',
        marginLeft: 10,
        marginRight: 16
    }
});
